<template>
	<div class="submitList">
		<div class="bg-box"></div>
		<div class="page-wrapper">
			<div class="search-box">
				<van-icon name="search" />
				<input type="text" v-model="search" placeholder="请输入医院名称搜索" @keyup.enter="handleSearch" />
			</div>
			<div class="select-group">
				<div class="select-box" @click="showState = true">
					审批状态
					<van-icon name="arrow-down" />
				</div>
				<div class="select-box" @click="showType = true">
					类型
					<van-icon name="arrow-down" />
				</div>
				<div class="select-box" @click="show = true">
					提交日期
					<van-icon name="arrow-down" />
				</div>
			</div>
			<van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
				<div class="list-box">
					<div class="list-item" v-for="(item, index) in list" :key="index" @click="$router.push({ path: '/detail', query: { id: item.id, isSubmit: 1 } })">
						<p class="name" v-if="item.hospital">{{ item.hospital.title }}</p>
						<p class="label">类型：{{ getType(item.type) }}</p>
						<p class="label">
							金额：<span>￥{{ item.amount }}</span>
						</p>
						<p class="time">{{ getTime(item.createtime) }}</p>
						<div class="state" :class="[{ green: item.is_verify == 2 }, { red: item.is_verify == 3 }, { gray: item.is_verify == -1 }]">
							{{ getVerify(item.is_verify) }}
						</div>
					</div>
				</div>
			</van-list>
		</div>
		<van-popup v-model="show" position="bottom">
			<van-datetime-picker v-model="currentDate" type="date" title="选择完整时间" :min-date="minDate" :max-date="maxDate" @cancel="show = false" @confirm="handleTime" />
		</van-popup>
		<van-popup v-model="showType" position="bottom">
			<van-picker title="类型" show-toolbar :columns="columns" @confirm="onConfirm" @cancel="showType = false" />
		</van-popup>
		<van-popup v-model="showState" position="bottom">
			<van-picker title="审批状态" show-toolbar :columns="columnsState" @confirm="onConfirmState" @cancel="showState = false" />
		</van-popup>
	</div>
</template>

<script>
	import moment from "moment";
	export default {
		data() {
			return {
				list: [],
				loading: false,
				finished: false,
				page: 0,
				type: "",
				time: "",
				search: "",
				user: [],
				currentDate: new Date(),
				minDate: new Date(2020, 0, 1),
				maxDate: new Date(2100, 10, 1),
				columns: ["全部", "入账", "出账"],
				columnsState: ["全部", "审批中", "已通过", "已驳回"],
				state: "",
				show: false,
				showType: false,
				showState: false,
				// 是否跳转
				isJump: false,
			};
		},
		activated() {
			if (this.isJump) this.onLoad();
			this.isJump = true;
		},
		mounted() {
			this.handleSearch();
			this.$bus.$on('submitList',()=>{
				this.handleSearch();
			})
		},
		methods: {
			onLoad() {
				if (this.finished) return;
				this.loading = true;
				this.$api
					.bill_lists({
						user_id: this.$cookies.get("_user_finance"),
						page: ++this.page,
						start_time: this.time ? Math.floor(new Date(this.time + " 00:00:00").getTime() / 1000) : "",
						end_time: this.time ? Math.floor(new Date(this.time + " 23:59:59").getTime() / 1000) : "",
						type: this.type,
						hospital_key: this.search,
						verify_status: this.state,
					})
					.then((res) => {
						this.loading = false;
						this.list.push(...res.data.data);
						if (res.data.data.length < 10) {
							this.finished = true;
						}
					});
			},
			handleTime(value) {
				this.time = moment(value).format("YYYY-MM-DD");
				this.handleSearch();
				this.show = false;
			},
			onConfirm(value, index) {
				this.type = index;
				this.handleSearch();
				this.showType = false;
			},
			onConfirmState(value, index) {
				this.state = index;
				this.handleSearch();
				this.showState = false;
			},

			handleSearch() {
				this.page = 0;
				this.list = [];
				this.loading = true;
				this.finished = false;
				this.onLoad();
			},
			getType(type) {
				switch (type) {
					case 1:
						return "入账";
					case 2:
						return "出账";
					default:
						return type;
				}
			},
			getVerify(verify) {
				switch (verify) {
					case 0:
					case 1:
						return "审批中";
					case 2:
						return "已通过";
					case 3:
						return "已驳回";
					case -1:
						return "已撤回";
					default:
						return verify;
				}
			},
			getTime(time) {
				return moment(time * 1000).format("YYYY-MM-DD HH:mm");
			},
		},
	};
</script>

<style lang="scss" scoped>
	.submitList {
		min-height: 100vh;
		padding-bottom: 70px;

		.bg-box {
			height: 11rem;
			background: linear-gradient(to bottom, #51b1c1, #f6f6f6);
			position: fixed;
			width: 100%;
		}

		.page-wrapper {
			position: relative;
			z-index: 1;
			padding-top: 0.37rem;

			.select-group {
				display: flex;
				justify-content: space-around;
				align-items: center;
				height: 1.2rem;

				.select-box {
					display: flex;
					align-items: center;
					color: #fff;

					.van-icon {
						margin-left: 2px;
					}
				}
			}

			.search-box {
				width: 9.2rem;
				background: #fff;
				margin: 0 auto;
				border-radius: 4px;
				height: 0.91rem;
				padding: 0 0.35rem;
				display: flex;
				align-items: center;

				.van-icon {
					font-size: 16px;
					margin-right: 0.16rem;
				}

				input {
					flex: 1;
					line-height: 0.91rem;
				}
			}

			.list-box {
				width: 9.2rem;
				margin: 0.27rem auto 0;

				.list-item {
					width: 100%;
					height: 3.84rem;
					border-radius: 4px;
					background-color: #fff;
					margin-bottom: 0.27rem;
					padding: 0.61rem;
					position: relative;

					p.name {
						font-size: 17px;
						margin-bottom: 0.32rem;
					}

					p.label {
						font-size: 12px;
						color: #707070;
						margin-bottom: 0.27rem;

						span {
							color: #e00a0a;
						}
					}

					p.time {
						font-size: 10px;
						margin-top: 0.59rem;
						color: #707070;
					}

					.state {
						position: absolute;
						right: 0;
						top: 0.53rem;
						width: 1.65rem;
						height: 0.67rem;
						line-height: 0.67rem;
						background-color: #f06600;
						font-size: 12px;
						color: #fff;
						padding-left: 0.45rem;
						border-top-left-radius: 15px;
						border-bottom-left-radius: 4px;

						&:after {
							content: "";
							position: absolute;
							width: 0.08rem;
							height: 0.08rem;
							background-color: #fff;
							border-radius: 50%;
							left: 0.24rem;
							top: 0.29rem;
						}

						&.green {
							background-color: #35bd00;
						}
						&.gray {
							background-color: #999;
						}

						&.red {
							background-color: #dc2020;
						}
					}
				}
			}
		}
	}
</style>
